/* eslint-disable no-nested-ternary */
import React, { memo } from 'react';
import Style from './Menu.module.less';
import MiniHISTLogo from 'assets/image/logo-min-hist.png';
import LightFullHISTLogo from 'assets/image/light-logo-max-hist.png';
import DarkFullHISTLogo from 'assets/image/dark-logo-max-hist.png';
import { useNavigate } from 'react-router-dom';
import { useAppSelector } from 'modules/store';
import { selectGlobal } from 'modules/global';

interface IProps {
  collapsed?: boolean;
}

export default memo((props: IProps) => {
  const navigate = useNavigate();
  const globalState = useAppSelector(selectGlobal);
  const handleClick = () => {
    navigate('/');
  };

  return (
    <div
      className={Style.menuLogo}
      style={{ margin: 0, padding: props.collapsed ? '3px 8px' : '3px 20px' }}
      onClick={handleClick}
    >
      <img
        src={props.collapsed ? MiniHISTLogo : globalState.theme === 'dark' ? DarkFullHISTLogo : LightFullHISTLogo}
        alt='HISTLogo'
      />
    </div>
  );
});
